{% extends 'backstage/layout/layout.html' %}
{% block title %}
    文章管理-caesar博客管理系统
{% endblock %}

{% block keywords %}
    caesar博客管理系统
{% endblock %}

{% block description %}
    caesar博客管理系统
{% endblock %}

{% block daohang %}
    文章管理
    <span class="c-gray en">&gt;</span>
    栏目列表
{% endblock %}

{% block article %}
    <article class="cl pd-20">
        <div class="cl pd-5 bg-1 bk-gray mt-20">
        <span class="l">
            <a href="javascript:;" onclick="category_add('添加栏目','/manager/category_add/','600','550')"
               class="btn btn-primary radius">
                <i class="Hui-iconfont">&#xe600;</i>
                添加栏目
            </a>
        </span>
            <span class="r">共有数据：<strong>{{ count }}</strong> 条</span>
        </div>
        <table class="table table-border table-bordered table-bg">
            <thead>
            <tr class="text-c">
                <th width="40">序号</th>
                <th width="150">栏目名称</th>
                <th width="90">栏目图片</th>
                <th width="150">发布文章数</th>
                <th width="130">操作</th>
            </tr>
            </thead>
            <tbody>
            {% for item in items %}
                <tr class="text-c">
                    <td>{{ forloop.counter }}</td>
                    <td>{{ item.cate_name }}</td>
                    <td>
                        {% if item.picture %}
                            <img src="/{{ item.picture }}" style="width: 50px; height: 50px;">
                        {% endif %}
                    </td>
                    <td>{{ item.count }}</td>
                    <td class="td-manage">
                        <a title="编辑" href="javascript:;" onclick="category_edit('{{ item.cate_name }}编辑','/manager/category_edit/?id={{ item.id }}','800','500')"
                           class="ml-5" style="text-decoration:none">
                            <i class="Hui-iconfont">&#xe6df;</i>
                        </a>
                        <a title="删除" href="javascript:;" onclick="category_del(this,{{ item.id }})" class="ml-5"
                           style="text-decoration:none">
                            <i class="Hui-iconfont">&#xe6e2;</i>
                        </a>
                    </td>
                </tr>
            {% endfor %}
            </tbody>
        </table>
    </article>
{% endblock %}

{% block autoScript %}
    <script>
        /*
        参数解释：
        title	标题
        url		请求的url
        id		需要操作的数据id
        w		弹出层宽度（缺省调默认值）
        h		弹出层高度（缺省调默认值）
    */
        /*管理员-增加*/
        function category_add(title, url, w, h) {
            var index = layer.open({
                // 跟着系统走
                type: 2,
                // 设置弹出页的宽高
                area: [w + 'px', h + 'px'],
                // 设置标题
                title: title,
                // 设置路由
                content: url
            });
            // layer_show(title, url, w, h);
        }
        /*栏目-编辑*/
        function category_edit(title, url, w, h) {
            var index = layer.open({
                type: 2,
                area: [w + 'px', h + 'px'],
                title: title,
                content: url
            });
        }

        /*栏目-删除*/
        function category_del(obj, id) {
            layer.confirm('确认要删除吗？', function (index) {
                //此处请求后台程序，下方是成功后的前台处理……
                $.ajax({
                    type: 'get',
                    url: '/manager/category_del/',
                    data: {id: id},
                    dataType: 'json',
                    success: function (data) {
                        if (data.code == 0) {
                            $(obj).parents("tr").remove();
                            layer.msg('已删除!', {icon: 6, time: 2000});
                        } else {
                            layer.msg(data.msg, {icon: 5, time: 2000});
                        }
                    },
                    error: function (data) {
                        console.log(data.msg);
                    }
                });
            });
        }
    </script>
{% endblock %}